<template>
  <div class="page">
    <h4 style="margin-left: 3px">基本信息筛选</h4>
    <el-row :gutter="20">
      <el-form ref="formInline" :inline="true" :model="formInline" id="formbox">
        <el-col :span="6" class="mb20">
          <el-form-item label="姓名：" prop="name">
            <el-input
              style="width: 252px"
              v-model="formInline.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6" class="mb20">
          <el-form-item label="证件号码：" prop="cardNumber">
            <el-input
              v-model="formInline.cardNumber"
              @blur="getbirthday"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="出生日期：" prop="birthday">
            <el-date-picker
              :disabled-date="disableFutureDates"
              v-model="formInline.birthday"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :teleported="false"
              placeholder="选择日期"
              style="width: 252px"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="责任医生：" prop="responsibleDoctor">
            <el-input
              v-model="formInline.responsibleDoctor"
              placeholder="请输入责任医生"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="病种：" prop="diseaseType">
            <el-select v-model="formInline.diseaseType" placeholder="请选择病种">
              <el-option label="高血压" value="高血压"></el-option>
              <el-option label="糖尿病" value="糖尿病"></el-option>
              <el-option label="高糖" value="高糖"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="随访状态：" prop="followStatus">
            <el-select v-model="formInline.followStatus" placeholder="">
              <el-option label="全部" value=""></el-option>
              <el-option label="待随访" value="待随访"></el-option>
              <el-option label="已随访" value="已随访"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="随访超时：" prop="followTimeOut">
            <el-select v-model="formInline.followTimeOut" placeholder="">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="随访日期：" prop="followTime">
            <!-- <el-date-picker
             :disabled-date="disableFutureDates"
              v-model="formInline.followTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
                style="width: 252px;"
            ></el-date-picker> -->
            <el-date-picker
              style="width: 274px"
              :disabled-date="disableFutureDates"
              v-model="formInline.followTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="下次随访日期：" prop="nextFollowTime">
            <!-- <el-date-picker
              v-model="formInline.nextFollowTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
               :teleported="false"
              placeholder="选择日期"
              style="width: 252px;"
            ></el-date-picker> -->
            <el-date-picker
              style="width: 274px"
              v-model="formInline.nextFollowTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="体检日期：" prop="medicalExaminationDate">
            <el-date-picker
              style="width: 274px"
               :disabled-date="disableFutureDates"
              v-model="formInline.medicalExaminationDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" class="mb20">
          <el-form-item label="下次年检日期：" prop="nextMedicalExaminationDate">
            <el-date-picker
              style="width: 274px"
              v-model="formInline.nextMedicalExaminationDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4 style="margin-left: 3px">居民列表 (共{{ total }}条)</h4></el-col
      >
      <el-col :span="24" style="display: flex">
        <el-col :span="3">
          <div class="table-btn">
            <div>
              <el-checkbox
                @change="checkedAllChange"
                v-model="checkedAll"
                :label="'全选'"
                :disabled="tableData.length == 0"
              />
            </div>
            <div style="margin-right: 10px">
              <label
                >已选择<el-text type="primary">{{
                  checkedAll == true ? selectionCount : multipleSelection.length
                }}</el-text
                >条</label
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20" class="tr">
          <el-button type="primary" @click="showUpload">导入居民资料</el-button>
          <el-button
            :disabled="multipleSelection.length === 0"
            @click="exportSelect()"
            type="primary"
            style="color: #fff; width: 115.6px"
            >导出</el-button
          >

          <el-button
            :disabled="multipleSelection.length === 0"
            type="danger"
            @click="delSelect()"
            style="color: #fff; width: 115.6px"
            >删除</el-button
          >
          <el-button type="success" @click="downloadTemp()"
            >下载导入模版</el-button
          >
        </el-col>
      </el-col>
    </div>
    <el-table
      ref="multipleTableRef"
      border
      :data="tableData"
      style="width: 100%"
      table-layout="auto"
      max-height="460"
      class="tableAuto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column fixed prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="cardNumber" width="180" label="证件号码">
      </el-table-column>
      <el-table-column prop="phoneNumber" width="150" label="联系电话">
      </el-table-column>
      <!-- <el-table-column
            prop="codeType"
            label="证件类型">
          </el-table-column> -->
      <el-table-column prop="birthday" width="150" label="出生日期">
      </el-table-column>
      <el-table-column prop="contacts" width="150" label="联系人姓名">
      </el-table-column>
      <el-table-column prop="contactsNumber" width="150" label="联系人电话">
      </el-table-column>
      <!-- <el-table-column
            prop="nationality"
            label="国籍">
          </el-table-column>
          <el-table-column
            prop="nation"
            label="民族">
          </el-table-column>
          <el-table-column
            prop="bloodType"
            label="血型">
          </el-table-column>
          <el-table-column
            prop="rh"
            label="rh类型">
          </el-table-column>
          <el-table-column
            prop="el"
            width="150"
            label="文化程度">
          </el-table-column>
          <el-table-column
            prop="career"
            width="150"
            :show-overflow-tooltip="true"
            label="职业">
          </el-table-column>
          <el-table-column
            prop="company"
            width="200"
            :show-overflow-tooltip="true"
            label="工作单位">
          </el-table-column>
          <el-table-column
            prop="marriageMode"
            label="婚姻方式">
          </el-table-column>
          <el-table-column
            prop="payWay"
            width="150"
            :show-overflow-tooltip="true"
            label="支付方式">
          </el-table-column>
          <el-table-column
            prop="domicile"
            width="120"
            :show-overflow-tooltip="true"
            label="常驻户籍">
          </el-table-column> -->
      <el-table-column
        prop="address"
        width="240"
        :show-overflow-tooltip="true"
        label="现住址"
      >
      </el-table-column>
      <!-- <el-table-column
            prop="villageCommittee"
            width="180"
            :show-overflow-tooltip="true"
            label="村委会">
          </el-table-column>
          <el-table-column
            prop="domicileType"
            width="120"
            :show-overflow-tooltip="true"
            label="户籍类型">
          </el-table-column> -->
      <el-table-column
        prop="domicileAddress"
        width="240"
        :show-overflow-tooltip="true"
        label="户籍地址"
      >
      </el-table-column>
      <el-table-column
        prop="diseaseType"
        :show-overflow-tooltip="true"
        width="120"
        label="病种"
      >
        <!-- <template slot-scope="scope">
              <span>{{ getDiseaseType(scope.row) }}</span>
            </template> -->
      </el-table-column>
      <el-table-column
        prop="followTime"
        width="150"
        :show-overflow-tooltip="true"
        label="随访日期"
      >
      </el-table-column>
      <el-table-column
        prop="followStatus"
        width="120"
        :show-overflow-tooltip="true"
        label="随访状态"
      >
      </el-table-column>
      <el-table-column
        prop="nextFollowTime"
        width="150"
        :show-overflow-tooltip="true"
        label="下次随访日期"
      >
      </el-table-column>
      <el-table-column
        prop="followTimeOut"
        :show-overflow-tooltip="true"
        label="随访超时"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="healthCheckupTime"
        :show-overflow-tooltip="true"
        label="体检日期"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="nextHealthCheckupTime"
        :show-overflow-tooltip="true"
        label="下次年检日期"
        width="150"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="takeMedicine"
        width="180"
        :show-overflow-tooltip="true"
        label="全年用药"
      >
      </el-table-column>
      <el-table-column
        prop="drg"
        width="180"
        :show-overflow-tooltip="true"
        label="全年病种"
      >
      </el-table-column> -->
      <el-table-column
        prop="responsibleDoctor"
        :show-overflow-tooltip="true"
        label="责任医生"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="modifyDate"
        width="150"
        :show-overflow-tooltip="true"
        label="更新时间"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="primary"
            @click.native.prevent="showRow(scope.$index)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col
      :span="24"
      style="
        display: flex;
        justify-content: end;
        margin-bottom: 50px;
        margin-top: 30px;
      "
    >
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.currentPage"
        v-model:page-size="this.size"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <el-dialog title="查看" width="80%" v-model="dialogDescVisible">
      <el-descriptions title="" direction="vertical" :column="4" border>
        <el-descriptions-item label="姓名" show-overflow-tooltip>{{
          people?.name
        }}</el-descriptions-item>
        <el-descriptions-item label="性别" show-overflow-tooltip>{{
          people?.gender
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式" show-overflow-tooltip>{{
          people?.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="证件号码" show-overflow-tooltip>{{
          people?.cardNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="证件类型" show-overflow-tooltip>{{
          people?.cardType
        }}</el-descriptions-item>
        <el-descriptions-item label="出生日期" show-overflow-tooltip>{{
          people?.birthday
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名" show-overflow-tooltip>{{
          people?.contacts
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人电话" show-overflow-tooltip>{{
          people?.contactsNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="国籍" show-overflow-tooltip>{{
          people?.nationality
        }}</el-descriptions-item>
        <el-descriptions-item label="民族" show-overflow-tooltip>{{
          people?.nation
        }}</el-descriptions-item>
        <el-descriptions-item label="血型" show-overflow-tooltip>{{
          people?.bloodType
        }}</el-descriptions-item>
        <el-descriptions-item label="rh类型" show-overflow-tooltip>{{
          people?.rh
        }}</el-descriptions-item>
        <el-descriptions-item label="文化程度" show-overflow-tooltip>{{
          people?.el
        }}</el-descriptions-item>
        <el-descriptions-item label="职业" show-overflow-tooltip>{{
          people?.career
        }}</el-descriptions-item>
        <el-descriptions-item label="工作单位" show-overflow-tooltip>{{
          people?.company
        }}</el-descriptions-item>
        <el-descriptions-item label="婚姻方式" show-overflow-tooltip>{{
          people?.marriageMode
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式" show-overflow-tooltip>{{
          people?.payWay
        }}</el-descriptions-item>
        <el-descriptions-item label="常住类型" show-overflow-tooltip>{{
          people?.domicile
        }}</el-descriptions-item>
        <el-descriptions-item label="现住址" show-overflow-tooltip>{{
          people?.address
        }}</el-descriptions-item>
        <el-descriptions-item label="所在居委会" show-overflow-tooltip>{{
          people?.villageCommittee
        }}</el-descriptions-item>
        <el-descriptions-item label="户籍类型" show-overflow-tooltip>{{
          people?.domicileType
        }}</el-descriptions-item>
        <el-descriptions-item label="户籍地" show-overflow-tooltip>{{
          people?.domicileAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="户口类型" show-overflow-tooltip>{{
          people?.nodeType
        }}</el-descriptions-item>
        <el-descriptions-item label="药物过敏史" show-overflow-tooltip>{{
          people?.drugAllergy
        }}</el-descriptions-item>
        <el-descriptions-item label="暴露史" show-overflow-tooltip>{{
          people?.exposureHistory
        }}</el-descriptions-item>
        <el-descriptions-item label="既往疾病史" show-overflow-tooltip>{{
          people?.previousIllnesses
        }}</el-descriptions-item>
        <el-descriptions-item label="近一年就诊记录" show-overflow-tooltip>
          <span class="text-ellipsis">{{ people?.medicalYear }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="纳入高血压日期" show-overflow-tooltip>{{
          people?.bloodDate
        }}</el-descriptions-item>
        <el-descriptions-item label="糖尿病" show-overflow-tooltip>{{
          people?.diabetes
        }}</el-descriptions-item> 
        <el-descriptions-item label="纳入糖尿病日期" show-overflow-tooltip>{{
          people?.diabetesDate
        }}</el-descriptions-item>
        <el-descriptions-item label="既往手术" show-overflow-tooltip>{{
          people?.hisOperation
        }}</el-descriptions-item>
        <el-descriptions-item label="既往外伤历史" show-overflow-tooltip>{{
          people?.hisTrauma
        }}</el-descriptions-item>
        <el-descriptions-item label="既往输血" show-overflow-tooltip>{{
          people?.previousInfusion
        }}</el-descriptions-item>
        <el-descriptions-item label="父亲疾病" show-overflow-tooltip>{{
          people?.fatherIllness
        }}</el-descriptions-item>
        <el-descriptions-item label="母亲疾病" show-overflow-tooltip>{{
          people?.motherIllness
        }}</el-descriptions-item>
        <el-descriptions-item label="兄弟姐妹疾病" show-overflow-tooltip>{{
          people?.brotherIllness
        }}</el-descriptions-item>
        <el-descriptions-item label="子女疾病" show-overflow-tooltip>{{
          people?.sunIllness
        }}</el-descriptions-item>
        <el-descriptions-item label="遗传病史" show-overflow-tooltip>{{
          people?.geneticDisease
        }}</el-descriptions-item>
        <el-descriptions-item label="残疾情况" show-overflow-tooltip>{{
          people?.brotherIllness
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次门诊日期" show-overflow-tooltip>{{
          people?.lastOutDate
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次门诊医生" show-overflow-tooltip>{{
          people?.theLastDoctor
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次门诊机构" show-overflow-tooltip>{{
          people?.outInstitutions
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次门诊挂号" show-overflow-tooltip>{{
          people?.lastRegistration
        }}</el-descriptions-item>
        <el-descriptions-item label="备注" show-overflow-tooltip>{{
          people?.notes
        }}</el-descriptions-item>
        <el-descriptions-item label="建档单位" show-overflow-tooltip>{{
          people?.filingUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="建档人" show-overflow-tooltip>{{
          people?.fillingPeople
        }}</el-descriptions-item>
        <el-descriptions-item label="建档日期" show-overflow-tooltip>{{
          people?.fillingDate
        }}</el-descriptions-item>
        <el-descriptions-item label="管理单位" show-overflow-tooltip>{{
          people?.managementUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="家庭医生" show-overflow-tooltip>{{
          people?.responsibleDoctor
        }}</el-descriptions-item>
        <el-descriptions-item label="责任医生" show-overflow-tooltip>{{
          people?.responsibleDoctor
        }}</el-descriptions-item>
        <el-descriptions-item label="修改日期" show-overflow-tooltip>{{
          people?.modifyDate
        }}</el-descriptions-item>
        <el-descriptions-item label="修改医生" show-overflow-tooltip>{{
          people?.modiyDoctor
        }}</el-descriptions-item>
        <el-descriptions-item label="不合格项" show-overflow-tooltip>{{
          people?.unqualifiedItems
        }}</el-descriptions-item>
        <el-descriptions-item label="随访时间" show-overflow-tooltip>{{
          people?.followTime
        }}</el-descriptions-item>
        <el-descriptions-item label="全年用药" show-overflow-tooltip>{{
          people?.takeMedicine
        }}</el-descriptions-item>
        <el-descriptions-item label="全年病种" show-overflow-tooltip>{{
          people?.drg
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- <el-dialog title="导入资料" v-model="dialogUploadVisible">
      <el-upload
        ref="upload"
        class="upload-demo"
        accept=".xlsx,.csv"
        :action="url"
        :limit="1"
         :headers="uploadHeaders"
        :on-change="handleChange"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="uploadSuccess"
        :on-error="handleError"
        :file-list="fileList"
        :auto-upload="false"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传XLSX/CSV文件，且不超过100M
        </div>
      </el-upload>
    </el-dialog> -->
  
    <DrugDialog
      ref="drugDialogRef"
      :state="state"
      @changeDrug="handleChangeDD"
    ></DrugDialog>
  </div>
</template>

<script lang="ts">
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import { getToken } from "@/utils/common";
const disableFutureDates = (time) => time > new Date();
import DrugDialog from "@/pages/examples/library/components/drugDialog.vue";

export default {
  components: {
    DrugDialog,
  },
  name: "LibraryPage",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      state: {
        dialogUploadVisible: false,
        accept: ".xlsx,.csv",
      },
      url: "/api/v1.0" + "/resident/inputResident",
      dialogDescVisible: false,
      dialogUploadVisible: false,
      loading: null,
      multipleSelection: [],
      formInline: {
        name: "",
        // gender: "",
        birthday: "",
        responsibleDoctor: "",
        followStatus: "",
        followTimeOut: "",
        nextFollowTime: "",
        followTime: "",
        cardNumber: "",
        diseaseType:"",
        followBeginTime:"",
        followEndTime:"",
        nextFollowBeginTime:"",
        nextFollowEndTime:"",
        checkUpBeginTime:"",
        checkUpEndTime:"",
        nextCheckUpBeginTime:"",
        nextCheckUpEndTime:"",
        medicalExaminationDate:"",
        nextMedicalExaminationDate:""
      },
      people: null,
      // tableData: [],
      tableData: [
      ],
      currentPage: 1,
      size: 10,
      fileList: [],
      total: 1,
      //选择条数
      selectionCount: 0,
      //全选状态
      checkedAll: false,
    };
  },
  mounted() {
    this.getLibrary();
    //@ts-ignore
    document.querySelector('.routerView').style.paddingTop='0px';
  },
  beforeUnmount() {
    //@ts-ignore
    document.querySelector('.routerView').style.paddingTop='50px';
  },
  methods: {
    disableFutureDates,
    handleChangeDD(newValue, oldValue) {
      this.state.dialogUploadVisible = newValue;
      this.getLibrary();
    },
    //全选
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        console.log(this.tableData);
        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    getLibrary() {
      // 准备请求数据，从表单数据中过滤出非空字段，并加入size和page信息
      const requestData = {};
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
          if(key=='followTime'){
            //@ts-ignore
            requestData.followBeginTime=this.formInline.followTime[0];
            //@ts-ignore
            requestData.followEndTime=this.formInline.followTime[1];
          }
          if(key=='nextFollowTime'){
            //@ts-ignore
            requestData.nextFollowBeginTime=this.formInline.nextFollowTime[0];
            //@ts-ignore
            requestData.nextFollowEndTime=this.formInline.nextFollowTime[1];
          }
          if(key=='medicalExaminationDate'){
             //@ts-ignore
            requestData.checkUpBeginTime=this.formInline.medicalExaminationDate[0];
             //@ts-ignore
            requestData.checkUpEndTime=this.formInline.medicalExaminationDate[1];
          }
          if(key=='nextMedicalExaminationDate'){
             //@ts-ignore
             requestData.nextCheckUpBeginTime=this.formInline.nextMedicalExaminationDate[0];
             //@ts-ignore
             requestData.nextCheckUpEndTime=this.formInline.nextMedicalExaminationDate[1];
          }

        }
      }
      //@ts-ignore
      delete requestData.nextMedicalExaminationDate;
      //@ts-ignore
      delete requestData.medicalExaminationDate;
      //@ts-ignore
      delete requestData.followTime;
      //@ts-ignore
      requestData.size = this.size;
      //@ts-ignore
      requestData.page = this.currentPage;

      // 发送POST请求，请求居民信息
      http.post("/resident/searchResident", requestData).then((res) => {
        // 更新表格数据和总数
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    //获取出生日期
    getbirthday() {
      if (
        this.formInline.cardNumber &&
        this.formInline.cardNumber.length === 18
      ) {
        const birthday = this.formInline.cardNumber.substring(6, 14);
        this.formInline.birthday =
          birthday.substring(0, 4) +
          "-" +
          birthday.substring(4, 6) +
          "-" +
          birthday.substring(6, 8);
      }
    },
    exportSelect() {
      const upArr = [];
      this.multipleSelection.forEach((v) => {
        upArr.push(v.id);
      });
      http.post("/resident/download", upArr).then((res) => {
        //@ts-ignore
        if(res.code=200){
           //@ts-ignore
           ElMessage.success(res.message);
          this.multipleSelection=[];
          this.checkedAll=false;
          this.$refs.multipleTableRef.clearSelection();
          window.open(res.data);
        }
       
      });
    },
 
    downloadTemp() {
      http.get("/resident/template").then((res) => {
        //@ts-ignore
        if(res.code === 200){
          window.open(res.data);
        }
      
      });
    },
    delSelect() {
      const delArr = [];
      this.multipleSelection.forEach((v) => {
        delArr.push(
          v.id
        );
      });
      this.$confirm("此操作会将所选记录从居民库中删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/resident/removeResident", delArr).then((res) => {
            //@ts-ignore
            if (res.code === 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.multipleSelection = [];
              this.$refs.multipleTableRef!.clearSelection();
              this.getLibrary();
              
            }
          });
        })
        .catch(() => {
          //
        });
    },
    onBack() {
      window.location.href = "/";
    },
    onSubmit() {
      this.currentPage = 1;
      this.getLibrary();
    },
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.currentPage = 1;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(val.length==this.total||val.length==this.size){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      } 
    },
    showRow(index) {
      console.log(index, "执行了");
      this.people = this.tableData[index];
      this.dialogDescVisible = true;
    },
    handleSizeChange(val) {
      this.size = val;
      this.getLibrary();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getLibrary();
    },
    showUpload() {
      this.state.dialogUploadVisible = true;
    },
    //文件格式 大小
    beforeUpload(file) {
      const isValidType =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "text/csv";
      const isValidSize = file.size / 1024 / 1024 < 100;

      if (!isValidType) {
        ElMessage.error("只能上传 XLSX 或 CSV 格式的文件!");
        return;
      }
      if (!isValidSize) {
        ElMessage.error("文件大小不能超过 100MB!");
        return;
      }
      return isValidType && isValidSize;
    },
    submitUpload() {
      if (this.fileList.length > 0) {
        this.$refs.upload.submit();
      }else{
        ElMessage.error("请选择文件");
      }
    },

    uploadSuccess(response) {
      const data = response;
      if (data.code == 200) {
        ElMessage.success(data.message);
      } else {
        ElMessage.error(data.message);
      }
      this.fileList = [];
      this.dialogUploadVisible = false;
      this.$refs.upload.clearFiles(); // 清空 el-upload 的内部文件列表
      // ElMessage.success("导入成功");
      if (data.code === 200) {
        ElMessage.success(data.msg);
        this.dialogUploadVisible = false;
        this.getLibrary();
      }else{
        this.dialogUploadVisible = false;
      }
    },
    handleError(response) {
      console.log(response);
      const data = response;
      this.fileList = [];
      this.$refs.upload.clearFiles(); // 清空 el-upload 的内部文件列表
      this.dialogUploadVisible = false;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file, fileList) {
      // console.log(file);
    },
    handleChange(file, fileList) {
      this.fileList = fileList; // 更新文件列表
    },
  },
  computed: {
    uploadHeaders() {
      // 返回包含 token 的请求头
      const token=getToken();
      return {
        token: `${token}`,
      };
    },
  },
};
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  background: #fff;
}
:deep(.el-input__wrapper) {
  width: 274px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 300px; /* 设置最大宽度限制 */
  vertical-align: top;
}
.el-header {
  background: #4485dd;
  color: #fff;
}
h1 {
  font-size: 14px;
  text-align: left;
  padding: 0;
}
h2 {
  font-size: 18px;
}
h3 {
  margin: 0;
}
.el-main {
  padding: 0;
  height: calc(100vh - 74px);
}
.main-filter {
  padding: 0 20px;
  border-bottom: 1px solid #f1f1f1;
}
.op {
  padding: 20px;
}
.op h4 {
  margin: 0;
  padding: 0;
}
.tr {
  text-align: right;
}
.tb {
  padding: 0 20px;
  margin-top: 2vw;
}
.tableAuto.el-table .cell {
  white-space: nowrap;
}
.el-descriptions-item__label.is-bordered-label {
  width: 25%;
}
.el-form-item {
  margin-bottom: 15px;
  margin-right: 5vw !important;
}
</style>
